import { Fragment } from '@/components/Fragment'; 
import { View } from '@aws-amplify/ui-react';
import { ViewDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import {
  AccessibilityExample,
  CustomAttributesExample,
  DefaultViewExample,
  DisabledStateExample,
  SetRenderedHTML,
  StylePropsExample,
} from './examples';

## Demo

<ViewDemo />

## Usage

Import the View component.

<Example>
  <DefaultViewExample />
  <ExampleCode>
```jsx file=./examples/DefaultViewExample.tsx

```
  </ExampleCode>
</Example>

### Set rendered HTML element

To change the HTML element rendered by the View, use the `as` prop. View renders a `<div>` by default.

<Example>
  <SetRenderedHTML />
  <ExampleCode>
```jsx file=./examples/SetRenderedHTML.tsx

```

  </ExampleCode>
</Example>

### Disabled state

To mark a View as disabled, pass the `isDisabled` prop.

<Example>
  <DisabledStateExample />
  <ExampleCode>
```jsx file=./examples/DisabledStateExample.tsx

```

  </ExampleCode>
</Example>

### Accessibility

The example below demonstrates setting an `aria-label` attribute and `role` for an icon button.

<Example>
  <AccessibilityExample />
  <ExampleCode>
```jsx file=./examples/AccessibilityExample.tsx

```

  </ExampleCode>
</Example>

### Standard HTML attributes

View will accept any of the standard HTML attributes that its underlying HTML element accepts. 

<Example>
  <CustomAttributesExample />
  <ExampleCode>
```jsx file=./examples/CustomAttributesExample.tsx

```
  </ExampleCode>
</Example>

## CSS Styling

### Local styling

To override styling on a specific View, you can use a class selector or style props.

_Using a class selector:_

```css
/* styles.css */
.mountain-view {
  background-color: #b7daf9;
  display: block;
  font-size: 5em;
  text-align: center;
}
```

```jsx
import { View } from '@aws-amplify/ui-react';
import './styles.css';

export const ClassNameExample = () => {
  return <View className="mountain-view">🏔</View>;
};
```

<Example>
  <View className="mountain-view">🏔</View>
</Example>

_Using style props:_

<Example>
  <StylePropsExample />
  <ExampleCode>
```jsx file=./examples/StylePropsExample.tsx

```

  </ExampleCode>
</Example>